<template>
	<view class="cardBox" v-if="loadings" style="padding: 0;">
		
		
		<view v-if="picker_show==true">
			<view
				style="text-align: center; background: #3e72ff;color: #fff;padding: 2% 5%;width: 60%;margin: 0 auto;border-radius: 0 0 50% 50%;background: linear-gradient(to right, #3e72ff, #86cfff);">
				{{$t("第2步 交易流程")}}
			</view>
			<block v-if="picker_flag==true">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array" :confirm-text="$t('确认')" 
      :cancel-text="$t('取消')">
								<view class="uni-input"
									style="border:2px solid #eee;padding-left: 10px;width: 90%;margin: 0 auto;margin-top: 20px;height: 40px;line-height: 40px;">
									{{$t(array[index])}}
									<uni-icons :type="icon_type" size="30" style="float: right;"></uni-icons>
								</view>
							</picker>
						</view>
					</view>
				</view>
				
				<view v-if="loadings&&jylc1" style="margin-top: 26px;">
					<view style="width:90%;margin: 0 auto;">
						<image style="width: 100%;" :src="jylc1_img" :class="jylc_height==1?'h180':'h90'"></image>
					</view>
					<view style="width: 80%;margin: 0 auto;text-align: center;height: 45px;margin-top: 6%;">
						<view v-if="loadings&&jylc1"
							style="background:#3e72ff;padding: 3px 10px;color: #fff;border-radius: 12px;width: 200px;margin: 0 auto;" @click="confirmJylc(order2)">{{$t('确认')}}</view>
					</view>
				</view>
			</block>
			<block v-if="picker_flag==false">
				<view style="width: 100%;height: 100rpx; font-size: 12px; text-align: center;line-height: 90rpx;">{{$t('待对方选择交易流程')}}</view>
			</block>
			<view style="height: 30px;"></view>
		</view>
		
		
		<view v-if="picker_show==false">
			<view style="width: 96%;height: 60rpx;display: flex;">
				<view style="width: 60rpx; background:#3e72ff; border-top-left-radius: 16rpx;border-bottom-left-radius: 16rpx; color: white; line-height: 60rpx; text-align: center; font-size:18px; height: 60rpx;">2</view>
				<view style="height: 60rpx; line-height: 60rpx;font-size: 24rpx; text-align: left; padding-left: 10rpx; font-weight: bold;">{{$t("交易流程")}}</view>
			</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
		HTTP_IMG_UTL,
		IMAGE_URL,
		IMAGE_PIC
	} from "@/config/app";
	export default {
		components: {
			
		},
		props: {
			order2: {
				type: [Array, Object, Number, String],
				default: {}
			},
		},

		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				IMAGE_PIC,
				url: IMAGE_URL,

				//语言
				lang: this.$i18n.locale,
				
				loading: false,
				loadings: false,

				order: {
					orderInfo: {
						
					}
				},
				jylc_height:1,
				array: [
					this.$t('请选择交易流程'),
					this.$t('分段运输-汽运/火车'),
					this.$t('分段运输-汽运(含口岸运输)'),
					this.$t('全程运输-汽运/火车'),
					this.$t('全程运输-汽运/火车(含转关)'),
					this.$t('全程运输-海运/空运'),
					//'自定义流程'
				],
				index: 0,
				icon_type: 'right',
				jylc1: false,
				jylc1_img:IMAGE_PIC+'assets/img/1.png',
				picker_flag: false,
				picker_show: false,
				type:''
			}
		},
		mounted() {
			this.order = this.order2
			console.log(this.order)
			if (this.order.role == 1 && this.order.orderInfo.release_info.is_express_price==1) {
				this.picker_flag = true
			}
			if (this.order.role == 2 && this.order.orderInfo.release_info.is_express_price==2) {
				this.picker_flag = true
			}
			this.loadings = true
			this.user_jylc(this.order)
		},

		methods: {
			user_jylc(i){
				const that = this
				that.$u.api.order.user_jylc({
					order_id: i.orderInfo.id,
					join_order_id: i.orderInfo.join_order_id,
				}).then(res => {
					if(res&&res.length!=0){
						that.picker_show = false
					}else{
						that.picker_show = true
					}
				})
			},
			confirmJylc(i){
				if (this.index === 0) {
					this.$u.toast(this.$t('请选择交易流程'), 2000)
					return false
				}
				uni.showModal({
					title: this.$t('确认交易流程'),
					content: this.$t("是否确认交易流程"),
					confirmText: this.$t('是'), // 修改确认按钮文字
					cancelText: this.$t('否'),
					success: (res) => {
						if (res.confirm) {
							const that = this
							that.$u.api.order.confirmJylc({
								role: i.role,
								release_user_id:i.orderInfo.release_user_id,
								join_user_id:i.orderInfo.join_user_id,
								order_id: i.orderInfo.id,
								join_order_id: i.orderInfo.join_order_id,
								type:that.type,
							}).then(res => {
								that.$u.toast(this.$t('操作成功'))
								that.$emit('on-oversize', 1);
								
							})
							// 用户点击了确定，执行相应的逻辑
						} else if (res.cancel) {
							// 用户点击了取消，执行相应的逻辑
						}
					}
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.icon_type = 'down'
				if (this.index == 0) {
					this.jylc1 = false;
					this.$u.toast(this.$t('请您选择交易流程'), 2000)
					return false
				}
				this.jylc1 = true;
				this.jylc_height=1; 
				//货物订单-发布方（运）-预付全款
				if(this.order.orderInfo.type=='goods'){
					if (this.order.role == 1 && this.order.orderInfo.release_info.is_express_price==1&& this.order.orderInfo.release_info.pay_type.value==1) {
						this.type = 'a'+this.index
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
					//货物订单-发布方（运）-预付定金
					if (this.order.role == 1 && this.order.orderInfo.release_info.is_express_price==1&& this.order.orderInfo.release_info.pay_type.value==2) {
						this.type = 'b'+this.index
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
					//货物订单-参与方（运）-预付全款
					if (this.order.role == 2 && this.order.orderInfo.release_info.is_express_price==2&& this.order.orderInfo.release_info.pay_type.value==1) {
						this.type = 'c'+this.index
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
					//货物订单-参与方（运）-预付定金
					if (this.order.role == 2 && this.order.orderInfo.release_info.is_express_price==2&& this.order.orderInfo.release_info.pay_type.value==2) {
						this.type = 'd'+this.index
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
				}
				
				//货代订单-发布方（运）
				if(this.order.orderInfo.type=='crossborder'){
					if (this.order.role == 1 && this.order.orderInfo.release_info.is_express_price==1) {
						this.type = 'e'+this.index
						if(this.index==0){ this.jylc_height=1; }
						if(this.index==1){ this.jylc_height=1; }
						if(this.index==2){ this.jylc_height=1; }
						if(this.index==4){ this.jylc_height=1; }
						if(this.index==3){ this.jylc_height=2; }
						if(this.index==5){ this.jylc_height=2; }
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
					if (this.order.role == 2 && this.order.orderInfo.release_info.is_express_price==2&& this.order.orderInfo.release_info.clearance==2) {
						this.type = 'f'+this.index
						if(this.index==0){ this.jylc_height=2; }
						if(this.index==1){ this.jylc_height=2; }
						if(this.index==2){ this.jylc_height=1; }
						if(this.index==3){ this.jylc_height=2; }
						if(this.index==4){ this.jylc_height=2; }
						if(this.index==5){ this.jylc_height=2; }
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
					if (this.order.role == 2 && this.order.orderInfo.release_info.is_express_price==2&& this.order.orderInfo.release_info.clearance==3) {
						this.type = 'g'+this.index
						if(this.index==0){ this.jylc_height=1; }
						if(this.index==1){ this.jylc_height=1; }
						if(this.index==2){ this.jylc_height=1; }
						if(this.index==3){ this.jylc_height=2; }
						if(this.index==4){ this.jylc_height=1; }
						if(this.index==5){ this.jylc_height=2; }
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
					
					if (this.order.role == 2 && this.order.orderInfo.release_info.is_express_price==2&& this.order.orderInfo.release_info.clearance==1) {
						this.type = 'h'+this.index
						if(this.index==0){ this.jylc_height=2; }
						if(this.index==1){ this.jylc_height=2; }
						if(this.index==2){ this.jylc_height=1; }
						if(this.index==3){ this.jylc_height=2; }
						if(this.index==4){ this.jylc_height=2; }
						if(this.index==5){ this.jylc_height=2; }
						if(this.lang=='zh'){
							this.jylc1_img = IMAGE_PIC+'assets/img/aa/'+this.type+'.png'
						}else{
							this.jylc1_img = IMAGE_PIC+'assets/img/bb/'+this.type+'.png'
						}
					}
					
					
					
				}
				
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/orderDetail.scss";
	.h180{ height: 180px; }
	.h90{ height: 90px; }
</style>